<script setup>
import { onMounted, onBeforeUnmount, nextTick, watch, ref, defineProps } from 'vue'
import ThreeApp from '../js/ThreeApp.js'
import { mainStore } from '@/store/mainStore.js'
import { storeToRefs } from 'pinia'

let threeApp
const form = ref({
  switchClick: true,
  checkList: ['目标ID'],
})
const switchValue = ref(true)
const store = mainStore()
const { activeCar, activeCarInfo } = storeToRefs(store)
// 定义 props
const props = defineProps({
  jsonData: {
    type: Object,
    required: true,
  },
})

let collapse = null
// 多选改变触发
const handleCheckedCitiesChange = () => {}
watch(
  () => props.jsonData,
  (newValue, oldValue) => {
    threeApp.renderGeometry(newValue.mapWebDetectInfo)
    threeApp.renderAreaAndLights(newValue.mapWebLightInfo)
  },
  { deep: true }
)
// watch(
//   () => form,
//   (newValue, oldValue) => {
//     console.error(newValue)
//   },
//   { deep: true }
// )
watch(
  () => activeCarInfo,
  (newValue, oldValue) => {
    console.error(activeCarInfo)
    if (newValue.value) {
      threeApp.update2dLabel({ x: newValue.value.centerPx, y: newValue.value.centerPy, z: 0 }, 'carLabel', true)
    } else {
      threeApp.update2dLabel(null, 'carLabel', false)
    }
  },
  { deep: true }
)
watch(
  () => activeCar,
  (newValue, oldValue) => {
    // console.error(newValue.value)
    threeApp.label2DGroup.getObjectByName('carLabel').visible = newValue.value ? true : false
  },
  { deep: true }
)

// 点击webgl
const mouseClick = (event) => {
  if (form.value.switchClick) {
    threeApp.meshOnClick(event)
  }
}
const filterStr = (val) => {
  return val !== -1 ? '是' : '否'
}
onMounted(() => {
  nextTick(() => {
    threeApp = new ThreeApp()
    threeApp.init()
    threeApp.css2dLabel({ x: -10000, y: -10000, z: 0 }, 'carLabel', 0.5, 0)
  })
})

onBeforeUnmount(() => {
  threeApp?.destroyed()
})
</script>

<template>
  <div class="webgl-container">
    <!-- 车辆标签 -->
    <p class="title">事件检测</p>
    <div id="webgl-eventDetection" @click="mouseClick($event)">
      <div id="carLabel">
        <p v-show="form.checkList.indexOf('1位车道号') != -1">1位：{{ activeCarInfo ? activeCarInfo.laneNo : null }}</p>
        <p v-show="form.checkList.indexOf('6位车道号') != -1">6位：{{ activeCarInfo ? activeCarInfo.laneNoSix : null }}</p>
        <p v-show="form.checkList.indexOf('目标ID') != -1">ID：{{ activeCarInfo ? activeCarInfo.id : null }}</p>
        <p v-show="form.checkList.indexOf('目标类别') != -1">类别：{{ activeCarInfo ? activeCarInfo.cls : null }}</p>
        <p v-show="form.checkList.indexOf('目标速度') != -1">速度：{{ activeCarInfo ? activeCarInfo.v : null }}</p>
        <p v-show="form.checkList.indexOf('事件类型') != -1">事件类型：{{ activeCarInfo ? activeCarInfo.eventType : null }}</p>
        <p v-show="form.checkList.indexOf('是否位于流量统计区') != -1">流量统计：{{ activeCarInfo ? filterStr(activeCarInfo.statisticsFlag) : null }}</p>
        <p v-show="form.checkList.indexOf('是否位于路口中心区') != -1">路口中心：{{ activeCarInfo ? filterStr(activeCarInfo.centerFlag) : null }}</p>
        <p v-show="form.checkList.indexOf('是否位于人行横道区') != -1">人行横道：{{ activeCarInfo ? filterStr(activeCarInfo.sidewalkFlag) : null }}</p>
        <p v-show="form.checkList.indexOf('是否位于行人等待区') != -1">行人等待：{{ activeCarInfo ? filterStr(activeCarInfo.peresTrainWaitingFlag) : null }}</p>
        <p v-show="form.checkList.indexOf('是否处于禁止停车区') != -1">行人等待：{{ activeCarInfo ? filterStr(activeCarInfo.illegalstopFlag) : null }}</p>
        <p v-show="form.checkList.indexOf('是否处于禁止变道区') != -1">行人等待：{{ activeCarInfo ? filterStr(activeCarInfo.nochangelaneFlag) : null }}</p>
      </div>
    </div>
    <div class="showBox">
      <transition name="slide-right">
        <el-form :model="form" :style="{ width: switchValue ? '100%' : '0' }">
          <el-form-item label="目标选择：">
            <el-switch v-model="form.switchClick"> </el-switch>
          </el-form-item>
          <el-form-item label="目标标签字段显示：" label-position="top">
            <el-checkbox-group @change="handleCheckedCitiesChange" v-model="form.checkList">
              <el-checkbox label="1位车道号"></el-checkbox>
              <el-checkbox label="6位车道号"></el-checkbox><br />
              <el-checkbox label="目标ID"></el-checkbox><br />
              <el-checkbox label="目标类别"></el-checkbox>
              <el-checkbox label="目标速度"></el-checkbox>
              <el-checkbox label="事件类型"></el-checkbox>
              <el-checkbox label="是否位于流量统计区"></el-checkbox>
              <div class="legend" style="background: #00ced1"></div>
              <el-checkbox label="是否位于路口中心区"></el-checkbox>
              <div class="legend" style="background: #e6a23c"></div>
              <el-checkbox label="是否位于人行横道区"></el-checkbox>
              <div class="legend" style="background: #67c23a"></div>
              <el-checkbox label="是否位于行人等待区"></el-checkbox>
              <div class="legend" style="background: #409eff"></div>
              <el-checkbox label="是否处于禁止停车区"></el-checkbox>
              <div class="legend" style="background: #ff3333"></div>
              <el-checkbox label="是否处于禁止变道区"></el-checkbox>
              <div class="legend" style="background: #b22222"></div>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </transition>
      <img
        class="collapseStyle"
        @click="switchValue = !switchValue"
        :style="{
          transform: switchValue ? 'rotate(180deg)' : '',
        }"
        src="/public/perceivedEffect/close.png"
      />
    </div>
  </div>
</template>

<style lang="less" scoped>
.collapseStyle {
  position: absolute;
  left: -35px;
  top: 50%;
  width: 50px;
  height: 50px;
  cursor: pointer;
}
/* 右侧展开收起动画 */
.slide-right-enter-active,
.slide-right-leave-active {
  transition: transform 0.3s ease;
}

.slide-right-enter-from,
.slide-right-leave-to {
  transform: translateX(100%);
}
#carLabel {
  position: absolute;
  width: 80px;
  padding-left: 2px;
  // height: 200px;
  background: #fff;
  color: #000;
  border: 1px solid #999;
  font-size: 12px;
  margin-top: 10px;
}
.legend {
  width: 13px;
  height: 13px;
  display: inline-block;
  border-radius: 50%;
  // vertical-align: middle;
}
.showBox {
  position: absolute;
  right: 0;
  top: 30px;
  max-width: 180px;
  // padding: 5px;
  border: 1px solid #ccc;
  background: #fff;
  // vertical-align: top;
}

::v-deep .el-checkbox {
  --el-checkbox-font-size: 13px;
  margin: 0 5px 0 5px;
}
.webgl-container {
  overflow: hidden;

  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  > p {
    height: 20px;
    line-height: 20px;
    margin-bottom: 5px;
    font-size: 14px;
    margin-left: 12px;
  }
}

#webgl-eventDetection {
  width: 100%;
  height: 100%;
}

.title {
  font-size: 14px;
  font-weight: 700;
}
</style>
